<template>
    <!--二维码登录 -->
    <div class="qrcodeLogin">
        <div class="img" v-loading="true">
            <!-- <h1>微信扫码登录</h1> -->
            <img src="../../assets/img/invalidQr.png" alt="">
            <i class="mask" v-show="showQrMask"></i>
        </div>
        <p>
            <svg></svg>
            <b>请使用手机微信扫码登录</b>
        </p>
    </div>
</template>

<script>
export default{
    data(){
        return{
            showQrMask: false, //是否显示二维码遮罩
        }
    }
}
</script>

<style lang="less" scoped>
.qrcodeLogin {
    .img {
        h1 {
            color: rgb(242, 102, 26);
            font: 30px/34px "楷体";
        }

        img {
            width: 260px;
            height: 260px;
        }

        .mask {
            width: 200px;
            height: 200px;
            opacity: 0.8;
            background-color: #fff;
            background-repeat: no-repeat;
            position: absolute;
            right: 100px;
            background-size: 50%;
            background-position: center;
        }
    }

    p {
        display: flex;
        justify-content: center;
        align-items: center;

        svg {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
        }

        b {
            color: rgb(241, 132, 60);
            font: 20px/28px "";
        }
    }

}
</style>